<!-- 试题显示组件 -->

<template>
	<!-- 组件最外层容器 -->
	<focus-box width="750" mode="col" justify="start" align="center">
		
		<!-- 试题类型 -->
		<focus-box width="750" :padding="[40,55]" mode="col" justify="start" align="start">
			<!-- 类型标签 -->
			<focus-box :padding="[2,18]" :radius="[14,0,14,0]" bg="primary"
			:styles="{'background-image':'linear-gradient(225deg, #4A87FD 0%, #3575F0 100%)'}">
				<focus-text v-if="type==1" size="30" color="white" text="单选题"></focus-text>
				<focus-text v-else-if="type==2" size="30" color="white" text="判断题"></focus-text>
				<focus-text v-else-if="type==3" size="30" color="white" text="多选题"></focus-text>
			</focus-box>
			<!-- 底部间隔 -->
			<focus-box width="10" height="10"></focus-box>
		</focus-box>
		
		<!-- 试题标题 -->
		<focus-box width="750" :padding="[0,50]" mode="col" justify="start" align="start">
			<!-- 题目文字 -->
			<focus-text size="32" color="content" :text="caption"></focus-text>
			<!-- 底部间隔 -->
			<focus-box width="10" height="34"></focus-box>
		</focus-box>
		
		<!-- 答案循环容器 -->
		<block v-for="(item,index) in anslist" :key="item.key">
			<!-- 试题选项块 -->
			<focus-box width="702" :padding="[30,32]" :margin="[16,0]"
			mode="row" justify="start" align="center"
			radius="12"
			:border=" ownanswer.indexOf(item.sort)>=0 ? 'primary' : '' "
			:bg=" ownanswer.indexOf(item.sort)>=0 ? 'primary' : 'white' "
			:bgscheme=" ownanswer.indexOf(item.sort)>=0 ? 'light' : '' "
			@click="answerClick(item)">
				<!-- 答案文字 -->
				<focus-text
				size="32"
				weight="bold"
				:text="item.content"
				:color=" ownanswer.indexOf(item.sort)>=0 ? 'primary' : 'content' "
				></focus-text>
			</focus-box>
		</block>
		
	</focus-box>
</template>


<script>
	/**
	 * 试题显示组件
	 * @description 试题显示组件，杜先生开发
	 * @property {String} tag 组件标识，默认：question-item
	 * @property {String,Number} type 试题类型
	 * @property {String} caption 试题标题文本
	 * @property {Array} ownanswer 自己选择的答案，数组格式
	 * @property {Array} anslist 试题备选答案列表，数组格式
	 * @event {Function()} answerclick 点击答案后触发
	 */
	export default {
		name: 'question-item',
		props: {
			tag: { type: String, default: 'question-item' },
			type: { type: [String,Number], default: 0 },
			caption: { type: String, default: '' },
			ownanswer: { type: Array, default: () => { return []; } },
			anslist: { type: Array, default: () => { return []; } },
		},
		
		// 页面事件
		methods: {
			
			// 备选答案项 点击
			answerClick(itemC) {
				
				// 先检测是否已经选中了
				var index_check = this.ownanswer.indexOf(itemC.sort);
				
				// 1. 多选题处理 (无论前面选过没都执行)
				if (this.type == 3)
				{
					// 新的选择结果
					let arr_check = this.ownanswer;
					// 如果已经前面选过了
					if (index_check >= 0)
					{
						// 将该答案排除
						arr_check.splice(index_check, 1);
					}
					// 如果没有选过
					else {
						// 将该答案的有效值 添加到 新的结果数组
						arr_check.push(itemC.sort);
					}
					// 将新结果数据 回父
					this.$emit('answerclick', {
						tag: this.tag,
						answerCheck: arr_check.sort(),
					});
				}
				
				// 2. 其它类型处理 (只有前面没选过才执行)
				else if (index_check < 0)
				{
					// 新的选择结果
					var arr_check = [];
					// 将该答案的有效值 添加到 新的结果数组
					arr_check.push(itemC.sort);
					// 将新结果数据 回父
					this.$emit('answerclick', {
						tag: this.tag,
						answerCheck: arr_check.sort(),
					});
				}
			},
		},
	}
</script>